<template>
  <div class="home">
    <div class="home_top">
      <div></div>
      <div class="home_top_text">航标管理平台</div>
      <div></div>
    </div>
    <div class="home_con">
      <div class="hxpl" style="position: absolute;left: 40px; width: 31%;height: 100%;z-index: 20;">
        <div class="hxpl_item" style="display: flex;flex-direction: column;justify-content: space-between;">
          <div style="width: 100%;height: 40%;" class="box">
            <hbyxjc style="width: 100%;height: 100%;"></hbyxjc>
          </div>
          <div style="width: 100%;height: 29%;" class="box">
            <glxhbgl style="width: 100%;height: 100%;"></glxhbgl>
          </div>
          <div style="width: 100%;height: 29%;" class="box">
            <lxhbgl style="width: 100%;height: 100%;"></lxhbgl>
          </div>
        </div>
        <div class="hxpl_item" style="display: flex;flex-direction: column;justify-content: space-between;">
          <div style="width: 100%;height: calc((100% / 4) - 1%);" class="box">
            <hbjkzl style="width: 100%;height: 100%;"></hbjkzl>
          </div>
          <div style="width: 100%;height: calc((100% / 4) - 1%);" class="box">
            <hbggqk style="width: 100%;height: 100%;"></hbggqk>
          </div>
          <div style="width: 100%;height: calc((100% / 4) - 1%);" class="box">
            <yclxf style="width: 100%;height: 100%;"></yclxf>
          </div>
          <div style="width: 100%;height: calc((100% / 4) - 1%);" class="box">
            <hbzdbbj style="width: 100%;height: 100%;"></hbzdbbj>
          </div>
        </div>
      </div>
      <div class="hxpl" style="position: absolute;right: 40px; width: 31%;height: 100%;z-index: 20;">
        <div class="hxpl_item" style="display: flex;flex-direction: column;justify-content: space-between;">
          <div style="width: 100%;height: calc((100% / 2) - 1%);" class="box">
            <hbxzgl style="width: 100%;height: 100%;"></hbxzgl>
          </div>
          <div style="width: 100%;height: calc((100% / 2) - 1%);" class="box">
            <hbzxjc style="width: 100%;height: 100%;"></hbzxjc>
          </div>
        </div>
        <div class="hxpl_item box">
          <spxj style="width: 100%;height: 100%;"></spxj>
        </div>
      </div>
      <div style="width: 60%;height: 100%;position : absolute;left: calc(50% - 30%);">
        <mapDiv style="width: 100%;height: 100%;"></mapDiv>
      </div>
    </div>
  </div>
</template>
<script>
import { enableRem, disableRem } from "@/utils/remUtils";
import hbyxjc from "./components/hbyxjc.vue"
import glxhbgl from "./components/glxhbgl.vue"
import lxhbgl from "./components/lxhbgl.vue"
import hbjkzl from "./components/hbjkzl.vue"
import hbggqk from "./components/hbggqk.vue"
import yclxf from "./components/yclxf.vue"
import hbzdbbj from "./components/hbzdbbj.vue"
import hbxzgl from "./components/hbxzgl.vue"
import hbzxjc from "./components/hbzxjc.vue"
import spxj from "./components/spxj.vue"
import mapDiv from "./mapDiv.vue"
export default {
  components: {
    hbyxjc,
    glxhbgl,
    lxhbgl,
    hbjkzl,
    hbggqk,
    yclxf,
    hbzdbbj,
    hbxzgl,
    hbzxjc,
    spxj,
    mapDiv
  },
  //变量
  data() { return {} },
  //初始
  mounted() {
    enableRem()
  },
  //事件
  methods: {},
  //销毁
  beforeDestroy() {
    disableRem()
  }
}
</script>
<style scoped>
.home {
  background: #000A1D;
  width: 100%;
  height: 100%;
  color: #fff;
  overflow: hidden;
}

.home_top {
  background: url("~@/assets/hb_img/bj/img_topic@2x.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 168px;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.home_top_text {
  background: linear-gradient(180deg, #FFF 0%, #77FFFE 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 76px;
  font-weight: 900;
  letter-spacing: 68px;
}

.home_con {
  width: 100%;
  height: calc(100% - 200px);
  position: relative;
  padding: 0 40px;
}

.hxpl {
  display: flex;
  justify-content: space-between;
}

.hxpl_item {
  width: calc((100% / 2) - 1%);
}

.box {
  border: 2px solid rgba(51, 112, 255, 0.50);
  background: rgba(0, 17, 46, 0.80);
}

::v-deep .XboxTop {
  width: 100%;
  height: 3vh;
  /* background-color: rgba(0, 78, 163, 0.8);
   */
  background: url("~@/assets/hb_img/bj/img_topBj.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  display: flex;
  align-items: center;
}

::v-deep .XboxTop_title {
  margin-left: 2.5rem;
  font-size: 1rem;
  font-weight: bold;
  background: linear-gradient(180deg, #FFF 0%, #77FFFE 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

::v-deep .XboxTop_con {
  width: 100%;
  height: calc(100% - 3vh);
  position: relative;
}
</style>